<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <title>Bootstrap - Load Tabs CSS</title>
</head>
<body>
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#news" data-toggle="tab">News</a></li>
    <li><a href="#blog" data-toggle="tab">Blog</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
</ul>
<!-- href属性的值要和后面tab-pane中的id值对应 -->
<div class="tab-content">
    <div class="tab-pane active" id="home">Home Page</div><!--tab标签对应的内容-->
    <div class="tab-pane" id="news">News Page</div>
    <div class="tab-pane" id="blog">Blog Page</div>
    <div class="tab-pane" id="about">About Page</div>
</div>
<script src="../js/jquery.js"></script>		<!--jQuery应该放在前面优先加载-->
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>